<template>
    <a-card class="fromBox" title="筹资项目申报">
        <template #extra>
            <a-tooltip title="返回上级">
                <a-button size="small" @click="getOut">
                    <RollbackOutlined />
                </a-button>
            </a-tooltip>
        </template>
        <div class="steps-content">
            <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
                <div class="fromBox">
                    <h3>申请信息：</h3>
                    <a-form-item label="项目名称" name="blprojectname">
                        <a-input v-model:value="formState.blprojectname" placeholder="请填写" disabled />
                    </a-form-item>
                    <a-form-item label="长期筹资" name="bltype">
                        <a-radio-group v-model:value="formState.bltype" disabled>
                            <a-radio :value="1">是</a-radio>
                            <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="筹资目标" name="blfinancmoney">
                        <a-input v-model:value="formState.blfinancmoney" placeholder="请填写" disabled />
                        <span style="color: red">(单位/元)</span>
                    </a-form-item>
                    <a-form-item label="申报单位" name="blsubject">
                        <a-select v-model:value="formState.blsubject" placeholder="请选择项申报单位" allowClear disabled
                            style="color: black">
                            <a-select-option :value="item.blname" v-for="(item, index) in Deport">{{ item.blname
                                }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="负责人姓名" name="blleader">
                        <a-input v-model:value="formState.blleader" placeholder="请填写" disabled />
                    </a-form-item>
                    <a-form-item label="联系人姓名" name="bllinker">
                        <a-input v-model:value="formState.bllinker" placeholder="请填写" disabled />
                    </a-form-item>
                    <a-form-item label="联系电话" name="bllinktel">
                        <a-input v-model:value="formState.bllinktel" placeholder="请填写" disabled />
                    </a-form-item>
                </div>
                <div>
                    <h3>项目信息：</h3>
                    <a-form-item label="项目描述" name="blbrief">
                        <a-textarea v-model:value="formState.blbrief" :rows="12" placeholder="简单描述项目用途及目的,200字以内"
                            disabled />
                    </a-form-item>
                    <a-form-item label="项目简介" name="bldetail">
                        <a-textarea v-model:value="formState.bldetail" :rows="12"
                            placeholder="包含项目的用途、预期效果、建议起捐额度、答谢方式等、500字以内" disabled />
                    </a-form-item>
                    <a-form-item label="项目类型" name="blext3">
                        <a-select v-model:value="formState.blext3" placeholder="请选择项目类型" allowClear disabled>
                            <a-select-option value="110周年校庆专题">110周年校庆专题</a-select-option>
                            <a-select-option value="人才培养">人才培养</a-select-option>
                            <a-select-option value="校园活动">校园活动</a-select-option>
                            <a-select-option value="校友返校">校友返校</a-select-option>
                            <a-select-option value="基础建设">基础建设</a-select-option>
                            <a-select-option value="科研创新">科研创新</a-select-option>
                            <a-select-option value="社会公益">社会公益</a-select-option>
                            <a-select-option value="事业发展">事业发展</a-select-option>
                        </a-select>
                    </a-form-item>
                </div>
                <div>
                    <h3>图片信息：</h3>
                    <a-form-item label="图片上传">
                        <a-upload disabled list-type="picture-card" :before-upload="beforeUpload" @change="handleChange"
                            :max-count="1" :customRequest="customUpload" :file-list="fileList" @preview="handlePreview">
                        </a-upload>
                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%" :src="previewImage" />
                        </a-modal>
                        <span style="color: red">*上传的图片可为院徽,学院代表性建筑等具有代表性的图片*</span>
                    </a-form-item>
                </div>
            </a-form>
        </div>
        <div class="steps-action">
            <a-space>
                <a-button @click="getOut">返回
                    <RollbackOutlined />
                </a-button>
            </a-space>
        </div>
    </a-card>
</template>

<script setup>
    import { reactive, ref, defineEmits, onMounted, toRaw, watch, defineProps } from 'vue';
    import { message } from 'ant-design-vue';
    import { smartSentry } from '/@/lib/smart-sentry';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { Funding } from '../../../../api/funding/funding-api';
    // 选择单位
    const Deport = ref([]);
    async function getInitDeport() {
        try {
            let res = await Funding.FindDanWei();
            Deport.value = res.data;
        } catch (error) {
            smartSentry.captureError(error);
        }
    }

    //表单验证规则
    const formRef = ref();
    const labelCol = {
        span: 5,
    };
    const wrapperCol = {
        span: 15,
    };
    const formState = ref({});
    //获取信息
    const props = defineProps({
        DataId: String,
    });
    const fileList = ref();
    async function getInitdate() {
        try {
            let blfinancprojectid = props.DataId;
            let res = await Funding.FindDetail(blfinancprojectid);
            formState.value = res.blfinancproject;
            fileList.value = [
                {
                    uid: res.blfinancproject.blfinancprojectid,
                    name: res.blfinancproject.blattachment,
                    status: 'done',
                    url: res.blfinancproject.blattachaddress,
                },
            ];
        } catch (error) {
            smartSentry.captureError(error);
        }
    }
    //预览图片的方法
    const previewVisible = ref(false);
    const previewImage = ref('');
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        previewImage.value = file.url || file.preview;
        previewVisible.value = true;
    };
    const handleCancel = () => {
        previewVisible.value = false;
    };
    const emits = defineEmits(['emitPass'])
    //返回
    const getOut = () => {
        emits('emitPass', true);
    };

    onMounted(() => {
        getInitDeport();
        getInitdate();
    });
</script>

<style lang="scss" scoped>
    .steps-content {
        width: 100%;
        border-radius: 6px;
        min-height: 510px;
        padding-top: 40px;
        margin: 20px auto;
    }

    .steps-action {
        margin-top: 24px;
        float: right;
    }

    .fromBox {}

    .jianjie span {
        display: block;
        font-size: 16px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
</style>